<script>
import { mapState, mapActions } from 'pinia'
import { useTaskStore } from '../stores/03.state(选项式)'

export default {
  data() {
    return {
      // 新任务标题
      newTaskTitle: '',
      
      // 用户信息表单
      userForm: {
        name: '',
        role: ''
      }
    }
  },
  computed: {
    // 获取store实例
    taskStore() {
      return useTaskStore()
    }
  },
  methods: {
    // 添加新任务
    addTask() {
      if (this.newTaskTitle.trim()) {
        this.taskStore.addTask(this.newTaskTitle.trim())
        this.newTaskTitle = ''
      }
    },
    
    // 更新用户信息
    updateUser() {
      if (this.userForm.name || this.userForm.role) {
        this.taskStore.updateUser({
          name: this.userForm.name || this.taskStore.user.name,
          role: this.userForm.role || this.taskStore.user.role
        })
        this.userForm = { name: '', role: '' }
      }
    }
  }
}
</script>

<template>
  <div class="tutorial-container">
    <header>
      <h1>03.state(选项式)</h1>
      <p class="subtitle">学习如何在选项式API中定义和使用state</p>
      
      <nav class="tutorial-nav">
        <router-link to="/01" class="nav-link">01.认识pinia</router-link>
        <router-link to="/02" class="nav-link">02.定义store(选项式)</router-link>
        <router-link to="/03" class="nav-link">03.state(选项式)</router-link>
        <router-link to="/04" class="nav-link">04.getters(选项式)</router-link>
      </nav>
    </header>

    <main>
      <section class="intro">
        <h2>什么是 State?</h2>
        <p>state 是 store 的核心部分，它包含了你想要全局管理的数据。在 Pinia 中，state 被定义为一个返回初始状态的函数。</p>
        
        <div class="code-example">
          <pre><code>// 定义一个store
export const useStore = defineStore('storeId', {
  // 推荐使用箭头函数，这样可以获得更好的TS类型推断
  state: () => {
    return {
      // 所有这些属性都将自动推断出它们的类型
      count: 0,
      name: 'Eduardo',
      isAdmin: true,
      items: [],
      user: { name: '张三', role: 'user' }
    }
  }
})</code></pre>
        </div>
      </section>

      <div class="demo-section">
        <div class="task-section">
          <h2>任务管理示例</h2>
          
          <!-- 任务列表 -->
          <div class="card">
            <div class="card-header">
              <h3>任务列表</h3>
              <div class="filter-controls">
                <button 
                  @click="taskStore.setFilter('all')" 
                  :class="{ active: taskStore.filter === 'all' }"
                >
                  全部
                </button>
                <button 
                  @click="taskStore.setFilter('active')" 
                  :class="{ active: taskStore.filter === 'active' }"
                >
                  未完成
                </button>
                <button 
                  @click="taskStore.setFilter('completed')" 
                  :class="{ active: taskStore.filter === 'completed' }"
                >
                  已完成
                </button>
              </div>
            </div>
            
            <div v-if="taskStore.loading" class="loading">
              加载中...
            </div>
            
            <div v-else-if="taskStore.error" class="error-message">
              {{ taskStore.error }}
            </div>
            
            <ul v-else class="task-list">
              <li 
                v-for="task in taskStore.tasks.filter(task => {
                  if (taskStore.filter === 'completed') return task.completed
                  if (taskStore.filter === 'active') return !task.completed
                  return true
                })" 
                :key="task.id"
                :class="{ completed: task.completed }"
              >
                <label class="task-item">
                  <input 
                    type="checkbox" 
                    :checked="task.completed" 
                    @change="taskStore.toggleTask(task.id)"
                  />
                  <span class="task-title">{{ task.title }}</span>
                </label>
                <button 
                  @click="taskStore.removeTask(task.id)" 
                  class="delete-btn"
                >
                  删除
                </button>
              </li>
            </ul>
            
            <div class="task-form">
              <input 
                v-model="newTaskTitle" 
                placeholder="添加新任务..." 
                @keyup.enter="addTask"
              />
              <button @click="addTask">添加</button>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="action-buttons">
            <button @click="taskStore.fetchTasks()" class="secondary-button">
              从服务器加载任务
            </button>
            <button @click="taskStore.resetTasks()" class="danger-button">
              重置所有任务
            </button>
          </div>
        </div>
        
        <div class="user-section">
          <h2>用户和设置</h2>
          
          <!-- 用户信息 -->
          <div class="card">
            <h3>用户信息</h3>
            <div class="user-info">
              <p><strong>姓名:</strong> {{ taskStore.user.name }}</p>
              <p><strong>角色:</strong> {{ taskStore.user.role }}</p>
            </div>
            
            <div class="form-group">
              <h4>更新用户信息</h4>
              <div class="form-row">
                <input v-model="userForm.name" placeholder="姓名" />
              </div>
              <div class="form-row">
                <input v-model="userForm.role" placeholder="角色" />
              </div>
              <button @click="updateUser">更新</button>
            </div>
          </div>
          
          <!-- 应用设置 -->
          <div class="card">
            <h3>应用设置</h3>
            <div class="settings-item">
              <span>暗黑模式</span>
              <label class="toggle">
                <input 
                  type="checkbox" 
                  :checked="taskStore.settings.darkMode" 
                  @change="taskStore.toggleDarkMode()"
                />
                <span class="slider"></span>
              </label>
            </div>
            <div class="settings-item">
              <span>通知</span>
              <label class="toggle">
                <input 
                  type="checkbox" 
                  :checked="taskStore.settings.notifications" 
                  @change="taskStore.$patch((state) => {
                    state.settings.notifications = !state.settings.notifications
                  })"
                />
                <span class="slider"></span>
              </label>
            </div>
          </div>
        </div>
      </div>
      
      <section class="code-explanation">
        <h2>State 的核心概念</h2>
        
        <div class="explanation-block">
          <h3>1. 定义 State</h3>
          <p>在选项式API中，state被定义为一个返回初始状态对象的函数：</p>
          <pre><code>state: () => ({
  tasks: [],
  filter: 'all',
  nextId: 1
})</code></pre>
        </div>
        
        <div class="explanation-block">
          <h3>2. 访问 State</h3>
          <p>在组件中，你可以直接通过store实例访问state：</p>
          <pre><code>const store = useTaskStore()
console.log(store.tasks) // 访问tasks数组
store.filter = 'completed' // 修改filter值</code></pre>
        </div>
        
        <div class="explanation-block">
          <h3>3. 变更 State</h3>
          <p>有多种方式可以变更state：</p>
          
          <h4>3.1 直接修改</h4>
          <pre><code>store.count++</code></pre>
          
          <h4>3.2 使用$patch方法</h4>
          <p>可以同时修改多个属性：</p>
          <pre><code>store.$patch({
  count: store.count + 1,
  name: '李四'
})</code></pre>
          
          <h4>3.3 使用$patch函数</h4>
          <p>更适合处理数组或复杂对象：</p>
          <pre><code>store.$patch((state) => {
  state.tasks.push({ id: 4, title: '新任务', completed: false })
  state.nextId++
})</code></pre>
        </div>
        
        <div class="explanation-block">
          <h3>4. 重置 State</h3>
          <p>使用$reset()方法可以将state重置为初始值：</p>
          <pre><code>store.$reset()</code></pre>
        </div>
      </section>
    </main>
  </div>
</template>

<style scoped>
.tutorial-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2.5rem;
  color: #42b883;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
}

h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}

h3 {
  font-size: 1.4rem;
  color: #2c3e50;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

h4 {
  font-size: 1.2rem;
  color: #2c3e50;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.tutorial-nav {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.nav-link {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border-radius: 4px;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background-color: #e0e0e0;
}

.nav-link.router-link-active {
  background-color: #42b883;
  color: white;
}

.code-example {
  background-color: #2c3e50;
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  overflow-x: auto;
}

pre {
  margin: 0;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.demo-section {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  margin: 2rem 0;
}

@media (max-width: 1024px) {
  .demo-section {
    grid-template-columns: 1fr;
  }
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.card-header h3 {
  margin: 0;
}

.filter-controls {
  display: flex;
  gap: 0.5rem;
}

.filter-controls button {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  background-color: #f0f0f0;
  color: #2c3e50;
}

.filter-controls button.active {
  background-color: #42b883;
  color: white;
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.task-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #eee;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.task-title {
  transition: all 0.3s ease;
}

.completed .task-title {
  text-decoration: line-through;
  color: #999;
}

.delete-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  background-color: #e53935;
}

.task-form {
  display: flex;
  margin-top: 1rem;
  gap: 0.5rem;
}

.task-form input {
  flex: 1;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.secondary-button {
  background-color: #2c3e50;
}

.danger-button {
  background-color: #e53935;
}

.loading {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.error-message {
  color: #e53935;
  padding: 1rem;
  background-color: #ffebee;
  border-radius: 4px;
  margin: 1rem 0;
}

.user-info {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.form-group {
  margin-top: 1rem;
}

.form-row {
  margin-bottom: 0.5rem;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #eee;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #42b883;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.explanation-block {
  margin-bottom: 2rem;
}

.explanation-block pre {
  background-color: #f8f8f8;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
}

input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

button {
  background-color: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #33a06f;
}
</style>
